<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/managementLayout.css">
    <script src="js/jquery1.12.4.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/monitor.js"></script>
    <script src="js/slider.js"></script>
    <script src="js/vue.js"></script>
    <title>后台权限管理系统</title>

</head>

<body>

<div id="container">
    <section class="public-main">
        <div class="sidebar public-main-left">
            <ul class="sidebar-menu">
                <!-- <li class="header">主导航</li> -->
                <li class='sidebar-menu-header'>
                    <img src='./img/logo.png' />
                    <span>后台管理系统</span>
                </li>
                <li class="treeview">
                    <a href="index.html">
                        <i class="fa fa-dashboard"></i> <span>主  页</span> <i class="fa fa-angle-right pull-right"></i>
                    </a>
                </li>
                <li class="header">后台管理</li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-dashboard"></i> <span>系统管理</span> <i class="fa fa-angle-right pull-right"></i>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="#"><i class="fa fa-circle-o"></i>用户管理</a></li>
                        <li><a href="#"><i class="fa fa-circle-o"></i>菜单管理</a></li>
                        <li><a href="#"><i class="fa fa-circle-o"></i>角色管理</a></li>
                        <li><a href="#"><i class="fa fa-circle-o"></i>权限管理</a></li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-files-o"></i>
                        <span>课程管理</span>
                        <span class="label label-primary pull-right">4</span>
                    </a>
                    <ul class="treeview-menu" style="display: none;">
                        <li><a href="/showCourseList"><i class="fa fa-circle-o"></i> 课程列表</a></li>
                        <li><a href="/showCourseStyleList"><i class="fa fa-circle-o"></i> 分类管理</a></li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-pie-chart"></i>
                        <span>订单管理</span>
                        <i class="fa fa-angle-right pull-right"></i>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="#"><i class="fa fa-circle-o"></i> 订单详情</a></li>
                        <li><a href="#"><i class="fa fa-circle-o"></i> 支付功能</a></li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-laptop"></i>
                        <span>智能客服</span>
                        <i class="fa fa-angle-right pull-right"></i>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="#"><i class="fa fa-circle-o"></i> 客服问答</a></li>
                        <li><a href="#"><i class="fa fa-circle-o"></i> 投诉建议</a></li>
                    </ul>
                </li>
                <li class="header">前台管理</li>
                <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>轮播图片</span></a></li>
                <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>课程推荐</span></a></li>
            </ul>
        </div>
        <!-- 主体部分 -->

        <div class="public-main-right">

            <header class="nav-wrapper">
                <div class="main-right-header">

                    <div class="location">
                        <strong>课程管理</strong>
                        <span>课程列表</span>
                    </div>

                    <div class='main-right-header-right'>

                            <span class="">
                                超级管理员：李艳卿 Chelsea
                            </span>

                        <span class="">
                            <a href="#"><img src="img/head.jpg" style="width: 25px"></a>
                        </span>
                        <span class=""><a href="login.jsp">退出登录</a></span>
                    </div>

                </div>
            </header>

            <form action="${pageContext.request.contextPath}/showList">
                <div class="search">
                    <span>课程名称:</span>
                    <input type="text" placeholder="需要查询的内容" />

                    <button class="price">价格</button>

                    <span>上下架</span>
                    <select name="fukuan">
                        <option value="">--请选择--</option>
                        <option value="">上架</option>
                        <option value="">下架</option>
                        <option value="">审核中</option>
                    </select>

                    <input type="button" value="搜索" />
                    <input type="button" value="重置" />
                    <a href="#" @click="addCourse">增加课程</a>
                </div>
            </form>
            <!-- 主体搜索及增加框 -->
            <div class='main-right-content'>
                <!-- 以下容器均可修改，原有id和class别动，否则样式会变 -->

                <table class="providerTable" cellpadding="1" cellspacing="1">
                    <tr class="firstTr">
                        <th width="5%">序号</th>
                        <th width="15%">课程封面</th>
                        <th width="15%">课程名称</th>
                        <th width="20%">课程分类</th>
                        <th width="10%">价格</th>
                        <th width="10%">上下架</th>
                        <th width="10%">操作</th>
                    </tr>
                    <c:forEach items="${pageInfo.list}" var="course">
                    <tr>
                        <td>${course.cId}</td>

                        <td>
<%--                            <img class="coursePic" src="img/course/course (1).jpg" />--%>
                            ${course.cPic}
                        </td>
                        <td>${course.cName}</td>
                        <td>${course.cTid}课程>${course.tId}老师课程</td>
                        <td>${course.price}</td>
                        <td>下架</td>
                        <td>
                            <a href="#" @click="addCourse"><img src="img/read.png" alt="查看" title="查看" /></a>
                            <a href="#" @click="addCourse"><img src="img/xiugai.png" alt="修改" title="修改" /></a>
                            <a href="#" @click="addCourse"><img src="img/schu.png" alt="删除" title="删除" /></a>
                        </td>
                    </tr>
                    </c:forEach>
<%--                    <tr>--%>
<%--                        <td>2</td>--%>
<%--                        <td><img class="coursePic" src="img/course/course (2).jpg" /></td>--%>
<%--                        <td>邯郸市五得利面粉厂</td>--%>
<%--                        <td>音乐课程>朱老师课程</td>--%>
<%--                        <td>5656元</td>--%>
<%--                        <td>上架</td>--%>
<%--                        <td>--%>
<%--                            <a href="#" @click="addCourse"><img src="img/read.png" alt="查看" title="查看" /></a>--%>
<%--                            <a href="#" @click="addCourse"><img src="img/xiugai.png" alt="修改" title="修改" /></a>--%>
<%--                            <a href="#" @click="addCourse"><img src="img/schu.png" alt="删除" title="删除" /></a>--%>
<%--                        </td>--%>
<%--                    </tr>--%>
                </table>

            </div>
            <footer>
                打牛蛙组教育集团
            </footer>
        </div>
    </section>
</div>


<!-- 模态框内容可修改，最外层盒子别动，否则样式会变 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">模态框标题</h4>
            </div>
            <div class="modal-body">
                <div class="tableList">
                    <form action="#">
                        <div class="">
                            <label for="">姓名：</label>
                            <input type="text" />
                            <span>*请输入姓名哦~</span>
                        </div>
                        <div class="">
                            <label for="">年龄：</label>
                            <input type="text" />
                            <span>*请输入年龄哦~</span>
                        </div>
                        <div class="">
                            <label for="">姓名：</label>
                            <input type="text" />
                            <span>*请输入姓名哦~</span>
                        </div>
                        <div class="">
                            <label for="">年龄：</label>
                            <input type="text" />
                            <span>*请输入年龄哦~</span>
                        </div>
                        <div class="">
                            <label for="">姓名：</label>
                            <input type="text" />
                            <span>*请输入姓名哦~</span>
                        </div>
                        <div class="">
                            <label for="">年龄：</label>
                            <input type="text" />
                            <span>*请输入年龄哦~</span>
                        </div>
                        <div class="">
                            <label for="">姓名：</label>
                            <input type="text" />
                            <span>*请输入姓名哦~</span>
                        </div>
                        <div class="">
                            <label for="">年龄：</label>
                            <input type="text" />
                            <span>*请输入年龄哦~</span>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
            </div>
        </div>
    </div>


    </section>

</div>

<!-- 每一页需加上slider，否则js动效无法显示 -->
<script src="js/slider.js"></script>
<!-- 每一页需加上slider，否则js动效无法显示 -->

<script type="text/javascript">
    // 模态框触发
    new Vue({
        el: ".public-main-right",
        methods: {
            addCourse: function() {
                $('#myModal').modal("show");
            }
        }
    });
</script>
</body>

</html>